{extend name="main"}
{block name="style"}
<style type="text/css">
	.w-80px{width: 80px;}
</style>
{/block}
{block name="body"}
<div class="bg-white p-3">
<el-form :model="form" @submit.native.prevent="submitForm" :rules="rules" ref="form" label-width="120px" :label-position="labelPosition">

  <el-form-item label="配置名称" prop="title">
    <el-input v-model="form.title" class="col-12 col-sm-3 pl-0 pr-0" placeholder="Title"></el-input>
  </el-form-item>

  <el-form-item label="提示" prop="tips">
    <el-input v-model="form.tips" class="col-12 col-sm-3 pl-0 pr-0" placeholder="Tips"></el-input>
  </el-form-item>

  <el-form-item label="配置名" prop="key">
    <el-input v-model="form.key" class="col-12 col-sm-3 pl-0 pr-0" placeholder="key"></el-input>
  </el-form-item>

  <el-form-item label="表单类型" prop="type">
    <el-radio-group v-model="form.type"
    @change="form.value=''">
      <el-radio :label="'input'">输入框</el-radio>
      <el-radio :label="'upload'">上传图片</el-radio>
      <el-radio :label="'upload_file'">上传文件</el-radio>
      <el-radio :label="'switch'">开关</el-radio>
      <el-radio :label="'radio'">单选</el-radio>
      <el-radio :label="'checkbox'">多选</el-radio>
      <el-radio :label="'select'">选择器</el-radio>
      <el-radio :label="'textarea'">多行文本</el-radio>
      <el-radio :label="'color'">颜色选择器</el-radio>
      <el-radio :label="'date'">日期</el-radio>
      <el-radio :label="'time'">时间</el-radio>
      <el-radio :label="'datetime'">日期时间</el-radio>
      <el-radio :label="'array'">数组</el-radio>
    </el-radio-group>
  </el-form-item>

  <el-form-item label="候选项" 
  v-if="form.type==='radio' || form.type==='checkbox' || form.type==='select'" prop="options">
  	<div class="flex">
  		<div class="w-80px">
	    	<el-input v-model="options.title" placeholder="Title"></el-input>
  		</div>
  		<div class="px-1">-</div>
  		<div class="w-80px">
	    	<el-input v-model="options.value" placeholder="Value"></el-input>
  		</div>
  		<div class="pl-1">
    		<el-button type="success" @click="addOptions" :disabled="!options.title || !options.value">添加</el-button>
  		</div>
  	</div>
  </el-form-item>

  <el-form-item label="默认值" v-if="form.type==='array'">
	  <el-tag
	  :key="tag"
	  v-for="tag in form.array"
	  class="mr-1"
	  closable
      effect="plain"
	  :disable-transitions="false"
	  @close="handleClose(tag)">
	  {{tag}}
	</el-tag>
	<el-input
	  class="w-80px"
	  v-if="inputVisible"
	  v-model="inputValue"
	  ref="saveTagInput"
	  size="small"
	  @keyup.enter.native="handleInputConfirm"
	  @blur="handleInputConfirm"
	>
	</el-input>
	<el-button v-else size="small" @click="showInput">添加</el-button>
  </el-form-item>

  <el-form-item label="默认值" prop="value" v-if="form.type==='input'">
    <el-input v-model="form.value" class="col-12 col-sm-3 pl-0 pr-0" placeholder="Value"></el-input>
  </el-form-item>

  <el-form-item label="默认值" prop="value" v-if="form.type==='upload'">
	  <el-image
	  	v-if="imgUrl" 
	  	class="mw-200px mh-200px"
	    :src="imgUrl" 
	    :preview-src-list="[imgUrl]">
	  </el-image>
  	  <el-upload
		  class="avatar-uploader"
		  action="/uploadFiles"
		  name="file"
		  accept="image/*"
		  :data="{path:'web/img'}"
		  :show-file-list="false"
		  :on-success="handleAvatarSuccess"
		  :on-error="handleAvatarError"
		  :before-upload="beforeAvatarUpload">
  			<el-button size="small" type="primary">选择文件</el-button>
	  </el-upload>
  </el-form-item>

  <el-form-item label="默认值" prop="value" v-if="form.type==='upload_file'">
    <el-input v-model="form.value" class="col-12 col-sm-3 pl-0 pr-0" placeholder="Value"></el-input>
  	  <el-upload
		  class="avatar-uploader"
		  action="/uploadFiles"
		  name="file"
		  :data="{path:'publics/files'}"
		  :show-file-list="false"
		  :on-success="handleAvatarSuccess"
		  :on-error="handleAvatarError">
  			<el-button size="small" type="primary">选择文件</el-button>
	  </el-upload>
  </el-form-item>

  <el-form-item label="默认值" prop="value" v-if="form.type==='switch'">
    <el-switch
	  v-model="form.value"
	  active-color="#13ce66"
	  inactive-color="#6c757d"
      :active-value="1"
      :inactive-value="0">
	</el-switch>
  </el-form-item>

  <el-form-item label="默认值" prop="value" v-if="form.type === 'radio'">
    <el-radio-group v-model="form.value">
      	<el-radio v-for="(v,index) in form.options" :label="v.value">{{v.title}}
      	<i class="el-icon-close ml-2 text-danger pointer" @click="delFormOption(index)"></i>
      	</el-radio>
    </el-radio-group>
  </el-form-item>

  <el-form-item label="默认值" v-if="form.type === 'checkbox'" prop="value">
    <el-checkbox-group v-model="form.arr_value">
      	<el-checkbox v-for="(v,index) in form.options" :label="v.value">{{v.title}}
  		<i class="el-icon-close ml-2 text-danger pointer" @click="delFormOption(index)"></i>
      	</el-checkbox>
    </el-checkbox-group>
  </el-form-item>

  <el-form-item label="默认值" v-if="form.type === 'select'" prop="value">
    <el-select v-model="form.value" placeholder="请选择">
      <el-option
        v-for="item in form.options"
        :key="item.value"
        :label="item.title"
        :value="item.value">
	      <span style="float: left">{{item.title}}</span>
	      <span style="float: right;">
	      	<i class="el-icon-close ml-2 text-danger pointer" @click="delFormOption(index)"></i>
	      </span>
      </el-option>
    </el-select>
  </el-form-item>

  <el-form-item label="默认值" v-if="form.type === 'textarea'" prop="value">
    <el-input type="textarea" :autosize="{ minRows: 3}" v-model="form.value" class="col-12 col-sm-3 pl-0 pr-0" placeholder="Value"></el-input>
  </el-form-item>

  <el-form-item label="默认值" v-if="form.type === 'color'" prop="value">
    <el-color-picker v-model="form.value" show-alpha></el-color-picker>
  </el-form-item>

  <el-form-item label="默认值" v-if="form.type === 'date'" prop="value">
    <el-date-picker
      v-model="form.value"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
  </el-form-item>

  <el-form-item label="默认值" v-if="form.type === 'time'" prop="value">
    <el-time-picker
	  v-model="form.value"
      arrow-control
      :picker-options="{
       selectableRange: '00:00:00 - 23:59:59'
      }"
      value-format="H:m:s"
	  placeholder="选择时间">
	</el-time-picker>
  </el-form-item>

  <el-form-item label="默认值" v-if="form.type === 'datetime'" prop="value">
    <el-date-picker
      v-model="form.value"
      type="datetime"
      placeholder="选择日期时间">
    </el-date-picker>
  </el-form-item>

  <el-form-item>
    <el-button type="primary" @click="submitForm('form')">保存</el-button>
    <el-button @click="resetForm('form')">重置</el-button>
  </el-form-item>
</el-form>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
	{empty name="Find"}
	var formData={
			ctype:'{:request()->get("ctype")}',
			title:'',
      		tips:'',
      		key:'',
      		type:'input',
      		value:'',
      		arr_value:[],
      		array:[],
      		options:[],
		};
	var options={
		title:'',
		value:''
	}
	var imgUrl='';
	{else/}
	var formData={:json_encode($Find,JSON_UNESCAPED_UNICODE)};
	var options=[];
	if(formData.options&&formData.options.length){
		options=formData.options
	}
	var imgUrl='';
	if (formData.type==='upload')
		imgUrl='{:config('web.imgurl')}'+formData.value;
	formData.arr_value=[];
    if(formData.type==='checkbox')
        formData.arr_value=formData.value.split(",");
	{/empty}
</script>
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			labelPosition:'right',
			inputVisible: false,
        	inputValue: '',
			form:formData,
        	imgUrl:imgUrl,
        	options:options,
	        rules: {
		      title: [
		        { required: true, message: '请输入名称', trigger: 'blur' },
		      ],
		      key: [
		        { required: true, message: '请输入配置名', trigger: 'blur' },
		      ],
	        }
		},
		watch:{
		    view:XYBase.viewWatch,
		},
		created(){
			XYBase.created(this);
		},
		methods:{
		    handleClose(tag) {
		        this.form.array.splice(this.form.array.indexOf(tag), 1);
		    },
		    showInput() {
		        this.inputVisible = true;
		        this.$nextTick(_ => {
		          this.$refs.saveTagInput.$refs.input.focus();
		        });
		    },
		    handleInputConfirm() {
		        let inputValue = this.inputValue;
		        if (inputValue) {
		          this.form.array.push(inputValue);
		        }
		        this.inputVisible = false;
		        this.inputValue = '';
		    },
			handleAvatarSuccess:function(res, file) {
				if(res){
					if(res.code === 0){
						if(res.data.type == 'web/img'){
							this.form.value=res.data.path;
							this.imgUrl=res.data.url;
						}else if(res.data.type == 'publics/files'){
							this.form.value=res.data.path;
						}
						XYBase.success(res.msg);
					}else{XYBase.error(res.msg);}
				}else{XYBase.error(XYBase.config.system_network_error)}
			},
			handleAvatarError:function(res, file) {
	          	XYBase.error(XYBase.config.system_network_error)
			},
	      	beforeAvatarUpload:function(file) {
				const isJPGPNG = XYBase.config.imageMime.indexOf(file.type)>=0;
				const isLt10M = file.size/1024 <= 10240;

				if (!isJPGPNG) {
				  XYBase.error('缩略图只能是PNG格式');
				  return false;
				}
				if (!isLt10M) {
				  XYBase.error('缩略图大小不能超过 10M!');
				  return false;
				}
				return isJPGPNG && isLt10M;
	      	},
			delFormOption(index){
				this.form.value='';
				this.form.arr_value=[];
				this.form.options.splice(index,1);
			},
			addOptions:function(){
				if (!this.options.title || !this.options.value) {
					XYBase.warning('候选项Title或Value不能为空');
					return;
				}
				this.form.options.push({title:this.options.title,value:this.options.value});
				this.options={title:'', value:'', };
			},
			submitForm:function(formName) {
				var _this=this;
				var D=_this.form;
				_this.$refs[formName].validate((valid) => {
				  if (valid) {
					const loading = XYBase.openloading();
					$.ajax({
						url:'',
						data:D,
						type:'post',
						dataType:'json',
						success:function(ret){
					        loading.close();
					        if (ret) {
								if(ret.code == 0){
									XYBase.success(ret.msg);
									setTimeout("window.location.reload();",1500)
								}else{
									XYBase.msg(ret.msg);
								}
					        }else{
				          		XYBase.error(XYBase.config.system_network_error)
					        }
						},
						error:function(err){
					        loading.close();
				          	XYBase.error(XYBase.config.system_network_error);
						}
					});
				  } else {
					XYBase.warning('请先把表单填写完整。');
				    return false;
				  }
				});
			},
			resetForm:function(formName) {
        		this.imgUrl='';
	        	this.options={
	        		title:'',
	        		value:''
	        	};
				this.$refs[formName].resetFields();
			},
		}
	});
$(function(){
	reloadWindowSize();
	$(window).resize(function(){
		reloadWindowSize();
	});
});
function reloadWindowSize (argument) {
	var winW=$(window).width();
	if(winW <= 576){
		vm.labelPosition='top';
	}else{
		vm.labelPosition='right';
	}
}
</script>
{/block}